<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/style.css"/>

	</head>

	<body id="body1">
	    
	    <!--my body go-->

	    <!--main-->
	    <div id="main_cont" class="main">
	        
	    	<!--<div class="msingle">
	    		<img src="http://192.168.1.167/myweb/meilidaluandou/images/images/image01.png"/>
	    		<p class="mui-center mui-clearfix">
	    		    <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined mui-pull-left">喜欢</button>
	    		    <span id="likenum" class="likenumout">
	    		    	100
	    		    </span>
	    		    <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined mui-pull-right">不喜欢</button>
	    		</p>
	    	</div>-->
	    </div>
	     
	      
	    <!--bottom-->
	    
	    <!--my body end-->
	    <script src="js/jquery-1.11.0.min.js"></script>
	    <script src="js/mui.min.js" ></script>
	    <script src="js/app.js"></script>
	    <script src="js/myajax.js"></script>
	    <script type="text/javascript">
	    	(function($,doc){
	    	    
	    	    var tuichu; //退出函数
	    	    var removeimgitem;//清除like和unlike数据函数
	    	    
	    	    ////////////////////////////////mui初始化
	    	    $.init({
                    //设置上拉加载 
	    	        pullRefresh : { 
                        container:"#body1",//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
                        up : {
                          height:50,//可选.默认50.触发上拉加载拖动距离
                          auto:true,//可选,默认false.自动上拉加载一次
                          contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
                          contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
                          callback :function(){
                              getinfo();
//                            if(numIsOver){
//                              this.endPullupToRefresh(true); //已经加载完了，到底了  
//                            }else{ 
                                this.endPullupToRefresh(false);//未加载完，还可以再加载
//                            }
                          }
                        } 
                  }

	    	    });
	    	    ///////////////////////////////////////
	    	    
	    	    
	    	    //////////////////////////////html5+plus加载完成执行
	    	    $.plusReady(function(){
	    	        
	    	        //退出函数
	    	        var tuichu = function(){
                        
                        plus.runtime.quit();
                    };
                    //清除本地like和unlike数据
	    	        removeimgitem = function(){
//	    	            alert(11);
                        plus.storage.removeItem("likeImgArray"); //测试用清除本地数据
                        plus.storage.removeItem("unlikeImgArray"); //测试用清除本地数据
                    };
       
	    	        var islike = function(imgid,bool){  
//	    	            imgid:图片id
//                      bool :true 或者 false
                        
                        var jqdom = jQuery("button[data-id="+imgid+"][data-like="+bool+"]");
                        
                        var likeImgArray = plus.storage.getItem('likeImgArray')||""; //已喜欢图片集合
                        var unlikeImgArray = plus.storage.getItem('unlikeImgArray')||""; //不喜欢集合
                        likeImgArray = likeImgArray.split(',');
                        unlikeImgArray = unlikeImgArray.split(',');
                        
                        var numspan=0;
                        
                        if(likeImgArray.indexOf(imgid)>-1||unlikeImgArray.indexOf(imgid)>-1){
                            plus.nativeUI.toast('已经投过票');
                            numspan = parseInt(jqdom.siblings('span').html());
                        }else{
                            if(bool=="true"){
                             //喜欢
                             likeImgArray.push(imgid);
                             likeImgArray = likeImgArray.toString();
                             plus.storage.setItem('likeImgArray',likeImgArray);
                             numspan = parseInt(jqdom.siblings('span').html())+1;
                             jqdom.addClass("likethis");
                             
                            }else{
                              unlikeImgArray.push(imgid);
                                unlikeImgArray = unlikeImgArray.toString();
                                plus.storage.setItem('unlikeImgArray',unlikeImgArray);
                                numspan = parseInt(jqdom.siblings('span').html())-1;
                                jqdom.addClass("unlikethis");  
                            } 
                        }
                        jqdom.attr('disabled','disabled').siblings('button').attr('disabled','disabled').siblings('span').html(numspan);
  
	    	        };

	    	        //将喜欢和不喜欢的图片id存储在本地
	    	        mui('#main_cont').on('tap','.like',function(){
                        var imgid = this.getAttribute('data-id');//图片id
                        var islike1 = this.getAttribute('data-like');//喜欢吗
                        islike(imgid,islike1);

	    	        });

	    	        
	    	        //将存储在本地的喜欢和不喜欢信息更新到数据库
	    	         ///////////////////////////////////将本地所存图片投票数据更新到数据库
                var uploadLikenum = function(likenum,unlikenum){
                    
                    var likeinfo = {
                        "likenum":likenum,
                        "unlikenum":unlikenum 
                        };
                    myajax.uploadlikeANDunlike(likeinfo,function(data){
                        if(data.state){
                            if(data.state==1){
                                removeimgitem();
                                tuichu();
                            }else{
                               tuichu(); 
                            }
                            
                        }else{  
                            tuichu();
                        }
                    });

                };
              ///////////////////////////////////////////////////////////////////
	    	        
	    	         
	    	        //退出提醒
	    	        var backButtonPress = 0;
                    $.back = function(event) {
                        backButtonPress++;
                        if (backButtonPress > 1) {
                            var likeImgArray = plus.storage.getItem('likeImgArray')||""; //已喜欢图片集合
                            var unlikeImgArray = plus.storage.getItem('unlikeImgArray')||""; //不喜欢集合
                            likeImgArray = likeImgArray.split(',');
                            unlikeImgArray = unlikeImgArray.split(',');
                            
                            uploadLikenum(likeImgArray,unlikeImgArray); 
 
                        } else {
                            plus.nativeUI.toast('再按一次退出应用');
                        }
                        setTimeout(function() {
                            backButtonPress = 0;
                        }, 1000); 
                        return false;        
                    };
  
	    	        
	    	        

	    	    });
	    	    //////////////////////////////
	    	     
	    	    
	    	    
	    	    //////////////////////////////////ajax加载图片数据
//	    	    var ajaxnum = 0;//加载次数 
//	    	    var numIsOver = false; //数据已经加载完了,开始时赋值false，代表没加载完
                var getinfo = function(){
                    var getalldatainfo = {"ajaxnum":"10"};
                    
                    myajax.getallimginfo(getalldatainfo,function(data){
                        
                        if(data[0].id){
                            
                            var likeImgArray = plus.storage.getItem('likeImgArray')||""; //已喜欢图片集合
                            var unlikeImgArray = plus.storage.getItem('unlikeImgArray')||""; //不喜欢集合
                            likeImgArray = likeImgArray.split(',');
                            unlikeImgArray = unlikeImgArray.split(',');
                            var imgidint = 0;
                            var likeclassname = "";
                            var unlikeclassname="";
                            var disab = "";
                           var alldom = "";//加载数据
                           var node=document.createElement("div");//创建节点   
                           for(var i =0;i<data.length;i++){  
                               imgidint = data[i].id;//
                               if(likeImgArray.indexOf(imgidint)>-1){ 
                                   likeclassname = 'likethis';
                                   disab ="disabled";
                               }else if(unlikeImgArray.indexOf(imgidint)>-1){
                                   unlikeclassname = 'unlikethis';
                                   disab ="disabled";
                               }
                               
                               var imgi = data[i].address.substring(3);
                               
                               var singledom = '<div class="msingle">\
                                        <img  src="'+imgi+'"/>\
                                        <p class="mui-center mui-clearfix">\
                                            <button data-id="'+data[i].id+'" data-like=true '+disab+'  type="button" class="mui-btn mui-btn-blue mui-btn-outlined mui-pull-left like '+likeclassname+'">喜欢</button>\
                                            <span class="likenumout">\
                                                '+data[i].love+'\
                                            </span>\
                                            <button data-id="'+data[i].id+'" data-like=false '+disab+' type="button" class="mui-btn mui-btn-blue mui-btn-outlined mui-pull-right like '+unlikeclassname+'">不喜欢</button>\
                                        </p>\
                                    </div>'; 
                                alldom+=singledom;
                                 
                                
                                 likeclassname = ""; 
                                 unlikeclassname="";
                                 disab = "";
                                
                           }
                           node.innerHTML = alldom;//填充节点
                           document.getElementById("main_cont").appendChild(node);//div增加显示内容
                           
                        }else{
                            alert(data);
                            return;
                        }
                    });

                };
                /////////////////////////////////////////////////////////
                
                
               
              
              
	    	}(mui,document)); 
	    </script>
	    
	    
	</body>

</html>